<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../reset.css">
    <style>
        #main {
            width: 400px;
            margin: 80px auto;
            padding: 20px;
        }

        #main>img {
            display: block;
            width: 60px;
            margin: 0 auto;
            margin-bottom: 60px;
        }

        input,
        button {
            display: block;
            width: 300px;
            margin: 0 auto;
        }

        input {
            line-height: 40px;
            height: 40px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding-left: 10px;
        }

        #tel {
            margin-bottom: 10px;
        }

        #login {
            margin-top: 80px;
            background-color: #f60;
            color: rgba(255, 255, 255, .5);
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="main">
        <img src="https://assets.maizuo.com/h5/mz-auth/public/app/img/logo.19ca0be.png" alt="">
        <input type="text" name="" id="tel" placeholder="手机号">
        <input type="password" name="" id="psd" placeholder="密码">
        <button id="login">登入</button>
    </div>
</body>
<script>
    let list = [
        { tel: '12345678910', psd: '123' },
        { tel: '17879673707', psd: '123' },
        { tel: '18296768202', psd: '123' },
        { tel: '10987654321', psd: '123' },
    ]

    function isMobile(s) {
        return /^1[0-9]{10}$/.test(s)
    }

    login.onclick = function () {
        let telValue = tel.value
        let psdValue = psd.value
        if (!telValue || !psdValue) {
            alert('手机号或密码不能为空')
            return
        }

        let telList = list.map(i => i.tel)
        if (!isMobile(telValue)) {
            alert('输入正确的手机号')
            return
        }
        //验证手机号
        if (!telList.includes(telValue)) {
            alert('手机号在数据库中不存在')
            return
        }
        let obj = JSON.stringify({ tel: telValue, psd: psdValue })
        let flag = list.some(item => JSON.stringify(item) === obj)
        if (flag) {
            window.open('./电影循环渲染.html')
        }


    }

</script>

</html>